<template>
    <Row>
        <Form ref="selfCheckForm" :model="dataClone" :label-width="125" class="self-check-form w" :show-message="false">
            <Row>
                <Col span="24">

                    <Row>
                        <Col span="24">
                            <FormItem label="二级集团：">
                                {{dataClone.belongOrgName}}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="12">
                            <FormItem label="企业名称：">
                                {{dataClone.companyName}}
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="年度：">
                                {{dataClone.year}}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="12">
                            <FormItem label="自评时间：">
                                {{this.renderViewDate(dataClone.selfLevelTime)}}
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="企业负责人：">
                                {{dataClone.managerName}}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row v-show="mode">
                        <Col span="12">
                            <FormItem label="现场评定时间：">
                                {{this.renderViewDate(dataClone.levelTime)}}
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="评定人：">
                                {{dataClone.auditor}}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="24">
                            <b>自查存在的问题：</b>
                            <Table :columns="problemColumns" :row-class-name="rowClassName" style="margin-bottom: 10px"
                                   :data="dataClone.selfCheckItems" :content="self"></Table>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="12">
                            <FormItem label="是否存在否决项：">
                                {{dataClone.hasVeto1==1?'是':dataClone.hasVeto1==0?'否':''}}
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="标准分：">
                                {{dataClone.standardScore}}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="12">
                            <FormItem label="否决项内容：" v-if="dataClone.hasVeto1==1">
                                {{dataClone.vetoContent1}}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="12">
                            <FormItem label="评定得分：">
                                {{dataClone.evaluationScore1}}
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="涉及得分：">
                                {{dataClone.involvedScore1}}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="12">
                            <FormItem label="综合评定得分：">
                                {{dataClone.integretedScore1}}
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="评定等级：" prop="level">
                                {{dataClone.level1==null?'':enStdCodingCodeIdMap[dataClone.level1].codingName}}
                            </FormItem>
                        </Col>
                    </Row>
                </Col>
            </Row>

            <Row v-show="mode">
                <Col span="24">
                    <Row>
                        <Col span="24">
                            <b>现场审核中发现的其他不符合项：</b>
                            <Table :columns="otherProblemColumns" :row-class-name="rowClassName"
                                   style="margin-bottom: 10px"
                                   :data="dataClone.sceneCheckItems" :content="self"></Table>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="12">
                            <FormItem label="是否存在否决项：">
                                {{dataClone.hasVeto==1?'是':dataClone.hasVeto==0?'否':''}}
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="标准分：">
                                {{dataClone.standardScore}}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="24">
                            <FormItem label="否决项内容：" v-if="dataClone.hasVeto==1">
                                {{dataClone.vetoContent}}
                            </FormItem>
                        </Col>
                    </Row>
                    <!--<FormItem label="综合评定意见：" prop="score"></FormItem>-->
                    <Row>
                        <Col span="12">
                            <FormItem label="评定得分：">
                                {{dataClone.evaluationScore}}
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="涉及得分：">
                                {{dataClone.involvedScore}}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="12">
                            <FormItem label="综合评定得分：">
                                {{dataClone.integretedScore}}
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="评定等级：">
                                {{dataClone.level==null?'':enStdCodingCodeIdMap[dataClone.level].codingName}}
                            </FormItem>
                        </Col>
                    </Row>
                </Col>
            </Row>
        </Form>

        <Modal title="图片" :transfer=false footer-hide v-model="pictureModal" :width=600>
            <Form :label-width="100">
                <Row>
                    <Col span="23">
                        <FormItem label="图片：">
                            <div class="demo-upload-list" v-for="item in uploadList" :key="item.id">
                                <img :src="item.url">
                                <div class="demo-upload-list-cover">
                                    <Icon type="ios-eye-outline" @click.native="handleView(item.name,item.url)"></Icon>
                                    <!--<Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>-->
                                </div>
                            </div>
                            <Upload
                                    ref="upload"
                                    :show-upload-list="false"
                                    :format="['jpg','jpeg','png','gif']"
                                    accept="image/jpg, image/jpeg,image/png,image/gif,image/bmp"
                                    :max-size="1024"
                                    :before-upload="handleBeforeUpload"
                                    multiple
                                    type="drag"
                                    :action="upUrl"
                                    :disabled="true"
									v-show='false'
                                    style="display: inline-block;width:58px;">
                                <div style="width: 58px;height:58px;line-height: 58px;">
                                    <Icon type="ios-camera" size="20"></Icon>
                                </div>
                            </Upload>
                            <Modal title="View Image" v-model="visible">
                                <img :src="viewUrl" v-if="visible" style="width: 100%">
                                <div slot="footer">
                                    <Button type="primary" class='ivu-btn-save' @click="visible=false">关闭</Button>
                                </div>
                            </Modal>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
        </Modal>
    </Row>
</template>

<script>
    import {Api} from "@/api";
    import _deepclone from 'lodash/cloneDeep'
    import pageCommonFunction from '@/components/pageCommonFunction.js'

    export default {
        name: "View",
        props: ['data', 'enStdCodingCodeIdMap', 'mode'],
        data() {
            return {
                dataClone: {},
                self: this,
                problemColumns: [
                    {title: '序号', key: 'seqNo', align: 'center', width: 65},
                    {title: '评价项目', key: 'project', align: 'center', minWidth: 90},
                    {title: '评价内容', key: 'content', align: 'center', minWidth: 110, tooltip: true},
                    {title: '评分标准', key: 'standard', align: 'center', minWidth: 110, tooltip: true},
                    {title: '分值', key: 'score', width: 60, align: 'center',},
                    {
                        title: '涉及得分', key: 'ifInvolved', width: 60, align: 'center',
                        render: (h, params) => {
                            return h('span', [
                                (!params.row.score && params.row.project !== '加分项' && params.row.project !== '扣分项') || !params.row.ifInvolved ? '' :
                                    params.row.project === '加分项' || params.row.project === '扣分项' ? params.row.ratingScore : params.row.score])
                        }
                    },
                    {title: '存在的问题', key: 'problem', minWidth: 100, align: 'center',},
                    {title: '问题类别', key: 'problemCategoryName', width: 90, align: 'center',},
                    {title: '检查时间', key: 'checkTime', width: 100, align: 'center', render: this.renderCellDate},
                    {title: '完成时限', key: 'completeTime', width: 100, align: 'center', render: this.renderCellDate},
                    {
                        title: '自评得分', key: 'ratingScore', width: 60, align: 'center',
                        render: (h, params) => {
                            return h('span', [(!params.row.score && params.row.project !== '加分项' && params.row.project !== '扣分项') || !params.row.ifInvolved ? '' : params.row.ratingScore])
                        }
                    },
                    {title: '整改情况', key: 'rectificationDetail', minWidth: 80, align: 'center', tooltip: true},
                    {
                        width: 60,
                        title: '照片',
                        key: 'img',
                        align: 'center',
                        render: (h, {row, index}) => {
                            return h("Icon", {
                                props: {
                                    type: 'md-eye',
                                    size: '20'
                                },
                                style: {
                                    cursor: 'pointer'
                                },
                                on: {
                                    click: () => {
                                        this.viewPicture(row.id);
                                    }
                                }
                            });
                        }
                    },
                    {
                        title: '评定扣分', key: 'deductScore', width: 60, align: 'center',
                        render: (h, params) => {
                            return h('span', [
                                ((!params.row.score || !params.row.ifInvolved) && params.row.project !== '加分项' && params.row.project !== '扣分项' ? '' : params.row.deductScore)
                            ]);
                        }
                    },
                ],
                otherProblemColumns: [
                    {title: '序号', key: 'seqNo', align: 'center', width: 65},
                    {title: '评价项目', key: 'project', align: 'center', minWidth: 120},
                    {title: '评价内容', key: 'content', align: 'center', minWidth: 180,},
                    {title: '评分标准', key: 'standard', align: 'center', minWidth: 140, tooltip: true},
                    {title: '分值', key: 'score', width: 65, align: 'center'},
                    {
                        title: '涉及得分', key: 'ifInvolved', width: 65, align: 'center',
                        render: (h, params) => {
                            return h('span', [
                                (!params.row.score && params.row.project !== '加分项' && params.row.project !== '扣分项') || !params.row.ifInvolved ? '' :
                                    params.row.project === '加分项' || params.row.project === '扣分项' ? 0 - params.row.deductScore : params.row.score])
                        }
                    },
                    {title: '存在的问题', key: 'problem', minWidth: 100, align: 'center', tooltip: true},
                    {
                        width: 65,
                        title: '照片',
                        key: 'img',
                        align: 'center',
                        render: (h, {row, index}) => {
                            return h("Icon", {
                                props: {
                                    type: 'md-eye',
                                    size: '20'
                                },
                                style: {
                                    cursor: 'pointer'
                                },
                                on: {
                                    click: () => {
                                        this.viewPicture(row.id);
                                    }
                                }
                            });
                        }
                    },
                    {title: '问题类别', key: 'problemCategoryName', minWidth: 120, align: 'center'},
                    {title: '检查时间', key: 'checkTime', width: 100, align: 'center',render:this.renderCellDate},
                    {title: '完成时限', key: 'completeTime', width: 100, align: 'center',render:this.renderCellDate},
                    {
                        title: '评定扣分', key: 'deductScore', width: 65, align: 'center',
                        render: (h, params) => {
                            return h('span', [(!params.row.score || !params.row.ifInvolved) && params.row.project !== '加分项' && params.row.project !== '扣分项' ? '' :
                                params.row.deductScore])
                        }
                    },
                    {title: '评定人', key: 'createUserName', width: 80, align: 'center'},
                ],

                uploadList: [],
                upUrl: Api.uploadPTWFiles,
                viewUrl: Api.interestedPartiesUserFile,
                visible: false,
                pictureModal: false,
            }
        },
        created() {
            let dataClone = _deepclone(this.data)
            if (!(dataClone.selfCheckItems instanceof Array)) {
                dataClone.selfCheckItems = []
            }
            if (!(dataClone.sceneCheckItems instanceof Array)) {
                dataClone.sceneCheckItems = []
            }
            this.dataClone = dataClone
        },
        mounted() {
            this.$Spin.show()
            this.$http.get(Api.getEnvSelfCheck + this.data.id, {params: {type: 2}}).then((res) => {
                if (res.data.status === 201) {
                    this.$Message.error(res.data.msg);
                } else {
                    this.dataClone.selfCheckItems = res.data.data.selfCheckItems
                    this.dataClone.sceneCheckItems = res.data.data.sceneCheckItems
                }
                this.$Spin.hide()
            }).catch(e => {
                this.$Message.error("自评台账详情数据获取失败")
                this.$Spin.hide()
            })
        },
        computed: {},
        methods: {
            ...pageCommonFunction,
            // 点击取消。发出关闭弹出框事件
            handleCancel() {
                this.$emit('close-dialog')
            },
            viewPicture(id) {
                let url = this.viewUrl + '/' + id + '/files/picture'
                this.$http.get(url + "?field=selfChecke").then((res) => {
                    if (res.data.result == "success") {
                        console.log(res.data)
                        this.uploadList = [];
                        res.data.data.map((item) => {
                            this.uploadList.push({
                                name: item.fileName,
                                id: item.id,
                                url: Api.downloadPTWSchemeFile + '/' + item.id
                            });
                        });
                    }
                    this.pictureModal = true
                })
            },
            handleView(name, url) {
                this.viewUrl = url;
                this.visible = true;
            },
            rowClassName(row, index) {
                if (row.ifInvolved) {
                    return '';
                } else {
                    return 'demo-table-ifInvolved-row';
                }
            }
        },
        components: {},
    }
</script>

<style scoped>
    .mb10 {
        margin-bottom: 10px;
    }

    .aR {
        text-align: right;
    }

    .fixed:after {
        display: block;
        content: '';
        clear: both;
        width: 100%;
        height: 0;
    }

    /deep/ .ivu-table .demo-table-ifInvolved-row td {
        background-color: #ffb61e;
        color: #fff;
    }

    .demo-upload-list {
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
        margin-right: 4px;
    }

    .demo-upload-list img {
        width: 100%;
        height: 100%;
    }

    .demo-upload-list-cover {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .6);
    }

    .demo-upload-list:hover .demo-upload-list-cover {
        display: block;
    }

    .demo-upload-list-cover i {
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
</style>
